<template>
    <div class="Manage">
        <Header :zIndex="3" ref="Header"></Header>
        <div class="content-wrap">
            <center>
                <div class="top">
                    <ul class="daohang_list">
                        <li><router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link></li>
                        <li><router-link class="list_item" :to="{ path: '/Manage' }">投票管理</router-link></li>
                        <li><router-link class="list_item on" :to="{ path: '/Level' }">账户升级</router-link></li>
                        <li><router-link class="list_item" :to="{ path: '/Userinfo' }">个人中心</router-link></li>
                        <li><router-link class="list_item" :to="{ path: '/Invate' }">推荐有奖</router-link></li>
                    </ul>
                </div>
                <p class="current-member">
                    当前套餐
                    <span :class="levelIcon" style="font-size:14px;margin:0 5px"><i class="fa fa-diamond"></i></span>
                    <span class="blue">{{levelName[userInfo.level]}}</span>
                    <span v-if="userInfo.level>0">
                    到期时间：<span class="blue">{{formatDate(userInfo.vipEnd)}}</span>
                    </span>
                </p>
                <div class="amounts">
                    <div class="item" v-for="(item, index) in amounts" :key="index">
                        <el-row>
                            <el-col :span="6" class="lab">套餐名称：</el-col>
                            <el-col :span="18">{{item.title}}</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6" class="lab">开通时长：</el-col>
                            <el-col :span="18">
                                <ul class="fee_item">
                                    <li v-for="(s,i) in item.items" :key="i" :class="feeItem==s ? 'on' : ''" @click="setFeeItem(s)">
                                        <span class="lab">{{s.subTitle ? s.subTitle : s.days + '天'}}</span>
                                        <span class="fee">￥{{(s.amount / 100).toFixed(2)}}</span>
                                    </li>
                                </ul>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="paytype">
                    <el-row>
                        <el-col :span="2" class="lab">支付方式：</el-col>
                        <el-col :span="22">
                            <div class="typeitems">
                                <div :class="payType == 'alipay_web' ? 'payitem payon' : 'payitem'" @click="setPayType('alipay_web')">
                                    <img src="../assets/img/alipay.png" />
                                    支付宝
                                </div>
                                <div :class="payType == 'wxpay_web' ? 'payitem payon' : 'payitem'" @click="setPayType('wxpay_web')">
                                    <img src="../assets/img/wxpay.png" />
                                    微信支付
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:30px;">
                        <el-col :span="2" class="lab">付款金额：</el-col>
                        <el-col :span="22">
                            <span style="color:#F00">￥{{payFee.toFixed(2)}}</span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:30px;">
                        <el-col :span="2" class="lab"><span>&nbsp;</span></el-col>
                        <el-col :span="22">
                            <el-button type="primary" size="large" @click="startPay" style="width:200px;height:50px;">立即支付</el-button>
                        </el-col>
                    </el-row>
                </div>
            </center>
            <el-dialog title="微信支付" @close="showWxQr = false" :close-on-click-modal="false" width="600px"
             :close-on-press-escape="false" :visible.sync="showWxQr">
                <div class="qrcode">
                    <vue-qr :size="300" :text="wxpayUrl"></vue-qr>
                    <div class="note">
                        请使用微信扫描二维码以完成支付
                    </div>
                    <div class="btns">
                        <el-button type="primary" @click="payDone">支付完成</el-button>
                        <el-button type="danger" @click="payDone">支付失败</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import User from '../../utils/user'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
import Ajax from '../../utils/ajax'
import { Toast } from 'vant'
import vueQr from 'vue-qr'

export default {
    name:'pay',
    components: {
        Header,
        Footer,
        vueQr
    },
    data(){
        return {
            amounts: [],
            feeId: 0,
            payType: 'wxpay_web',
            alipay: true,
            wxpay: true,
            levelIcon: 'free',
            userInfo: null,
            feeItem: null,
            payFee: 0,
            wxpayUrl: '',
            showWxQr: false
        }
    },
    created(){
        this.userInfo = User.getInfo();
        if(!this.userInfo || !User.getToken()) {
            this.$router.replace('/Login');
            return;
        }
        switch(this.userInfo.level){
            case 1:
                this.levelIcon = 'major';
                break;
            case 2:
                this.levelIcon = 'company';
                break;
            case 3:
                this.levelIcon = 'custom';
                break;
            default:
                break;
        }
        this.getAmounts();
    },
    methods:{
        // 获取支付金额信息
        getAmounts(){
            Ajax.get('payment/amount').then(res=>{
                if(res.code == 0) {
                    this.amounts = this.groupBy(res.data.amounts, function(o){
                        return o['level'];
                    })
                    if(this.amounts.length > 0){
                        this.setFeeItem(this.amounts[0].items[0]);
                    }
                    console.log(this.amounts);
                    this.alipay = res.data.alipay;
                    this.wxpay = res.data.wxpay;
                } else {
                    Toast(res.msg);
                }
            }).catch(err=>{
                console.log(err);
            })
        },
        // 分组，未使用
        groupBy(array, f){
            const groups = {};
            const that = this;
            array.forEach(function(o){
                if(that.userInfo.level > o.level) return;
                const group = JSON.stringify(f(o));
                var title = o.title;
                if(!groups[group]) {
                    groups[group] = {title: title, items: []};
                }
                groups[group].items.push(o);
            });
            return Object.keys(groups).map(function(group){
                return groups[group];
            });
        },
        // 设置支付金额
        setFeeItem(item){
            this.feeId = item.id;
            this.feeItem = item;
            this.payFee = item.amount / 100;
        },
        // 设置支付类型
        setPayType(p){
            this.payType = p;
        },
        // 开启支付
        startPay(){
            if(this.feeId < 1) {
                Toast('请选择付款金额');
                return;
            }
            if(!this.payType) {
                Toast('请选择付款方式');
                return;
            }
            var url = location.href;
            Ajax.post('payment/pay', {
                feeId : this.feeId,
                payType: this.payType,
                backUrl: url
            }).then(res=> {
                console.log(res);
                if(res.code == 0){
                    //提交成功
                    if(this.payType == 'alipay_web') {
                        this.openWindow(res.data);
                    } else {
                        this.showPayQr(res.data.data);
                    }
                } else {
                    Toast('订单提交失败：' + res.msg);
                }
            }).catch(err=>{
                console.error(err);
                Toast('网络错误，订单提交失败');
            });
        },
        openWindow(s){
            //打开新窗口
            var win = window.open();
            win.document.write(s);
        },
        // 微信支付二维码
        showPayQr(url){
            this.wxpayUrl = url;
            this.showWxQr = true;
            console.log('payurl', url);
        },
        // 支付完成
        payDone(){
            this.showWxQr = false;
            this.$router.replace("/Userinfo");
        }
    }
}
</script>
<style src="@/assets/css/manage.css"  scoped></style>
<style src="@/assets/css/service.css"  scoped></style>
<style src="@/assets/css/pay.css"  scoped></style>